<template>
  <div>
    <div class="head">
      <router-link  to="/shouye" class="back">
        <img src="../../../assets/1first/5-8搜索结果/back.png" alt="">
      </router-link>
      <div>消息中心</div>
    </div>
    <ul class="messageWrap">
      <li class="message" v-for="item in aMessage">
        <div class="time">
          {{item.time}}
        </div>
        <div class="cont">
          <div class="title">
            <h3>{{item.title}}</h3>
          </div>
          <div class="content">
            <div class="contImg">
              <img :src="item.imgSrc" alt="">
            </div>
            <div class="contText">
              <p>{{item.desc}}</p>
            </div>
          </div>
          <div class="clearfix">
            <span class="fl">查看更多</span>
            <span class="fr">&gt;</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        aMessage: [
          {
            time: '2017年06月20日10:44',
            title: '新品推荐',
            imgSrc: require('../../../assets/1first/5-8搜索结果/jinggao.png'),
            desc: '新品上市啦！时间不多了，赶紧行动起来吧！'
          },
          {
            time: '2017年06月20日10:44',
            title: '新品推荐',
            imgSrc: require('../../../assets/1first/5-8搜索结果/jinggao.png'),
            desc: '新品上市啦！时间不多了，赶紧行动起来吧！'
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .head{
    position: relative;
    text-align: center;
    background: #e53e42;
    color: #fff;
    line-height: 2.13rem;
    font-size: 0.8rem;
  }
  .back{
    position: absolute;
    left: 0;
    margin-left: 0.44rem;
  }
  .back>img{
    width: 0.51rem;
  }
  .messageWrap{
    padding: 0 0.44rem;
  }
  .time{
    text-align: center;
    padding: 0.67rem 0;
    font-size: 0.62rem;
    color: #808080;
  }
  .cont{
    background: #fff;
    border-radius: 0.22rem;
    border: solid 1px #cccccc;
    padding: 0.22rem 0.22rem 0 0.22rem;
  }
  .title{
    font-size: 0.67rem;
    font-family: MicrosoftYaHei;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
  }
  .content{
    display: flex;
    padding-bottom: 0.44rem;
  }
  .contImg{
    width: 2.889rem;
    flex: none;
  }
  .contImg>img{
    width: 100%;
  }
  .contText{
    flex: 1;
    margin-left: 0.44rem;
    font-size: 0.62rem;
    color: #808080;
  }
  .clearfix{
    border-top: 1px solid #ccc;
    line-height: 1.78rem;
    font-size: 0.62rem;
    color: #808080;
  }
</style>
